<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>我的优惠劵</title>
    <link href="css/main.css" type="text/css" rel="stylesheet" />
</head>
<body id="wdyhj">
<div class="container" >
    <ul class="gnd_tabList clearfix">
        <li class="detail_active"><span>未使用</span></li>
        <li><span>已使用</span></li>
        <li><span>已过期</span></li>
    </ul>
    <ul class="gnd_tabDetail">
        <li class="shop_detail" data-item="0">
        <div class="miandanjuan clearfix">
            <span class="shop_icon">商家</span>
            <div class="shop-picture fl">
                <img src="tmp/bg_shop1.png">
            </div>
            <div class="shop-info fl">
                <p class="mdj_1">古今贡酒500元代金券代金券</p>
                <p class="mdj_2">免费送小菜,再送3涮菜</p>
                <p class="mdj_3">2017.05.13-2017.12.31</p>
            </div>
            <div class="click_detail" data-index="1">
                <img src="images/select_detail.png">
            </div>
        </div>
        <div class="shop_only">
            仅限<span>诸葛烤鱼1</span>使用
        </div>
    </li>
        <li class="shop_detail data_state" >
            <div class="miandanjuan clearfix">
                <span class="shop_icon">商家</span>
                <div class="shop-picture fl">

                    <img src="tmp/bg_shop1.png">
                </div>
                <div class="shop-info fl">
                    <p class="mdj_1">古今贡酒500元代金券代金券</p>
                    <p class="mdj_2">免费送小菜,再送3涮菜</p>
                    <p class="mdj_3">2017.05.13-2017.12.31</p>
                </div>
                <div class="click_detail" data-index="1">
                    <img src="images/select_detail.png">
                </div>
            </div>
            <div class="shop_only">
                仅限<span>诸葛烤鱼1</span>使用
            </div>
        </li>
    </ul>

</div>
<script src="js/rem.js"></script>
<script src="js/jquery.js"></script>
<script src="libs/layer_mobile/layer.js"></script>
<script>
    $(function () {
        $(".gnd_tabList li").click(function(){
            $(".gnd_tabList li").removeClass("detail_active");
            $(this).addClass("detail_active");
        })

        $(".shop_detail").click(function(e){
            e.stopPropagation();
            var info="<div class='layer-tanchu'>"+
                "<div class='shop-title-picture'>" +
                "<span class='stp_title'>到店出示图片即可</span>" +
                    "<div class='stp_title_info'><img src='tmp/arbanner.jpg'/></div>" +
                "</div>"+
                "<div class='shangjia_info'>"+
                "<div class='si_top'>" +
                "<div class='merchant_info'>商家信息</div>"+
                "<div class='merchant_cont'>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "<P>ashfkjasdfkjagsdfklgasdklf</P>" +
                "</div>"+

                "</div>"+

                "</div>"+
                "<div class='exit'><img src='images/layer_close.png'/></div>"+
                "</div>";
            var layIndex= layer.open({
                className: 'afurong',
                content: info,
                shadeClose:false,
//                style:'top:-1rem',
                success: function(layero,index){

                }
            });
            $(".exit").click(function(){
                layer.close(layIndex);
            })
        });
    })

</script>
</body>
</html>